<template>
  <div class="list">
    <div class="bg-top">
      <ListTop title="知识空间" :tabs="['四个共同', '民族走廊']" :active="tabActive" @change="ChangeTab" />
      <div class="title">{{ imgList[subjectId - 1]?.title || categoryList[categoryId - 1] }}</div>
      <div class="list-box ui-center">
        <div class="item" v-for="item in list" :key="item.id" @click="Jump(item.id)">
          <img :src="baseURL + item.coverImg" alt="" />
          <div class="text">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
  <UiFooter />
</template>

<script setup>
import ListTop from '@/components/listTop.vue';

const { get, router, baseURL } = inject('global');

let tabActive = ref(1);
const ChangeTab = index => {
  if (index === tabActive.value) return;
  if (!index) {
    router.push('/listSpace?active=0');
  }
};

let imgList = ref([
    {
      title: '藏彝走廊',
      subjectId: 1
    },
    {
      title: '河西走廊',
      subjectId: 2
    },
    {
      title: '南岭走廊',
      subjectId: 3
    }
  ]),
  categoryList = ref(['祖国辽阔疆域', '中华悠久历史', '民族灿烂文化', '人民伟大精神']);

let list = ref([]),
  page = ref(0),
  loading = ref(false),
  noMore = ref(false),
  subjectId = ref(),
  categoryId = ref();
const GetData = () => {
  loading.value = true;
  subjectId.value = router.currentRoute.value.query.subjectId;
  categoryId.value = router.currentRoute.value.query.categoryId;
  get('/knowledge', { page: page.value, size: 12, subjectId: subjectId.value, categoryId: categoryId.value })
    .then(res => {
      loading.value = false;
      if (!res.content.length) {
        noMore.value = true;
        return;
      }
      if (!page.value) {
        list.value = res.content;
      } else {
        list.value = list.value.concat(res.content);
      }
    })
    .catch(() => {
      loading.value = false;
    });
};
const Jump = id => {
  router.push(`/listSpaceDetail?id=${id}&subjectId=${subjectId.value}`);
};

const LoadMore = () => {
  window.onscroll = () => {
    if (noMore.value || loading.value) return;
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop > 1200) {
      page.value++;
      GetData();
    }
  };
};

onMounted(() => {
  GetData();
  LoadMore();
});
</script>

<style lang="scss" scoped>
.list {
  background: #ede8e2;
  padding: 0 0 100px 0;
  .bg-top {
    @include bgImg('@/assets/list/top-bg_news.png');
    background-size: auto 417px;
    background-position: 0 250px;
  }
  .title {
    position: relative;
    width: 242px;
    height: 70px;
    @include bgImg('@/assets/list/bg-title.png');
    font-size: 18px;
    color: #9c2c29;
    line-height: 26px;
    padding: 22px 0;
    box-sizing: border-box;
    text-align: center;
    margin: 50px auto;
    font-weight: bold;
    &::after {
      content: '';
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      display: block;
      width: 35px;
      height: 9px;
      @include bgImg('@/assets/list/bg-title-arrow.png');
    }
  }
  .list-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 46px 38px;
    .item {
      width: 332.65px;
      background: #fffdf7;
      border: 1px solid #9c2c29;
      box-sizing: border-box;
      padding: 3px 3px 0;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      img {
        display: block;
        width: 100%;
        height: 236.62px;
        object-fit: cover;
      }
      .text {
        font-size: 18px;
        color: #3d3333;
        line-height: 28.79px;
        text-align: center;
        padding: 16px 0;
      }
    }
  }
}
</style>
